Skip to content

[767] fix: Resolve testimonials being cut - #210

Merged
VitalyyP merged 11 commits into
mainfrom
767-fix/long-testimonials-are-cut
Aug 17, 2025
Merged

[767] fix: Resolve testimonials being cut#210
VitalyyP merged 11 commits into
mainfrom
767-fix/long-testimonials-are-cut

Conversation

@VitalyyP

@VitalyyP VitalyyP commented Aug 11, 2025

Copy link
Copy Markdown
Contributor
  • Replace truncate-lines mixin with overflow auto and fixed height for mobile testimonials
  • Remove truncate-lines mixin for medium breakpoint testimonials to prevent content cutoff

@VitalyyP
VitalyyP requested a review from killev as a code owner August 11, 2025 11:48
@coderabbitai

coderabbitai Bot commented Aug 11, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

The PR updates testimonial SCSS. In website/modules/asset/ui/src/scss/_testimonials.scss, .sf-person__content no longer uses truncate-lines(7); it now uses a fixed max-height (150px) with vertical scrolling (overflow-y: auto), prevents horizontal overflow, enables wrap/break behavior, iOS scrolling optimization, overscroll containment, stable scrollbar gutter, and adds 12px right padding. For single-item testimonials (data-testimonial-count='1'), the previous 10-line truncation inside .sf-person-wrapper is removed. In website/modules/asset/ui/src/scss/_carousel.scss, some selector formatting was adjusted and a breakpoint-based truncate-lines(8) on .sf-person__content was removed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

Suggested reviewers

  • IhorMasechko
  • Anton-88
  • yuramax

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch 767-fix/long-testimonials-are-cut

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions

github-actions Bot commented Aug 11, 2025

Copy link
Copy Markdown

🔍 Vulnerabilities of apostrophe-cms:test

📦 Image Reference apostrophe-cms:test
digestsha256:2c30517610d617458857033d3d7b94e4e224e87b03067edafed64c1684636d23
vulnerabilitiescritical: 1 high: 4 medium: 0 low: 0
platformlinux/amd64
size291 MB
packages984
📦 Base Image node:23-alpine
also known as
  • 23-alpine3.22
  • 23.11-alpine
  • 23.11-alpine3.22
  • 23.11.1-alpine
  • 23.11.1-alpine3.22
digestsha256:b9d38d589853406ff0d4364f21969840c3e0397087643aef8eede40edbb6c7cd
vulnerabilitiescritical: 0 high: 0 medium: 1 low: 1
critical: 1 high: 0 medium: 0 low: 0 form-data 4.0.2 (npm)

pkg:npm/form-data@4.0.2

critical 9.4: CVE--2025--7783 Use of Insufficiently Random Values

Affected range>=4.0.0
<4.0.4
Fixed version4.0.4
CVSS Score9.4
CVSS VectorCVSS:4.0/AV:N/AC:H/AT:N/PR:N/UI:N/VC:H/VI:H/VA:N/SC:H/SI:H/SA:N
EPSS Score0.022%
EPSS Percentile4th percentile
Description

Summary

form-data uses Math.random() to select a boundary value for multipart form-encoded data. This can lead to a security issue if an attacker:

  1. can observe other values produced by Math.random in the target application, and
  2. can control one field of a request made using form-data

Because the values of Math.random() are pseudo-random and predictable (see: https://blog.securityevaluators.com/hacking-the-javascript-lottery-80cc437e3b7f), an attacker who can observe a few sequential values can determine the state of the PRNG and predict future values, includes those used to generate form-data's boundary value. The allows the attacker to craft a value that contains a boundary value, allowing them to inject additional parameters into the request.

This is largely the same vulnerability as was recently found in undici by parrot409 -- I'm not affiliated with that researcher but want to give credit where credit is due! My PoC is largely based on their work.

Details

The culprit is this line here: https://github.com/form-data/form-data/blob/426ba9ac440f95d1998dac9a5cd8d738043b048f/lib/form_data.js#L347

An attacker who is able to predict the output of Math.random() can predict this boundary value, and craft a payload that contains the boundary value, followed by another, fully attacker-controlled field. This is roughly equivalent to any sort of improper escaping vulnerability, with the caveat that the attacker must find a way to observe other Math.random() values generated by the application to solve for the state of the PRNG. However, Math.random() is used in all sorts of places that might be visible to an attacker (including by form-data itself, if the attacker can arrange for the vulnerable application to make a request to an attacker-controlled server using form-data, such as a user-controlled webhook -- the attacker could observe the boundary values from those requests to observe the Math.random() outputs). A common example would be a x-request-id header added by the server. These sorts of headers are often used for distributed tracing, to correlate errors across the frontend and backend. Math.random() is a fine place to get these sorts of IDs (in fact, opentelemetry uses Math.random for this purpose)

PoC

PoC here: https://github.com/benweissmann/CVE-2025-7783-poc

Instructions are in that repo. It's based on the PoC from https://hackerone.com/reports/2913312 but simplified somewhat; the vulnerable application has a more direct side-channel from which to observe Math.random() values (a separate endpoint that happens to include a randomly-generated request ID).

Impact

For an application to be vulnerable, it must:

  • Use form-data to send data including user-controlled data to some other system. The attacker must be able to do something malicious by adding extra parameters (that were not intended to be user-controlled) to this request. Depending on the target system's handling of repeated parameters, the attacker might be able to overwrite values in addition to appending values (some multipart form handlers deal with repeats by overwriting values instead of representing them as an array)
  • Reveal values of Math.random(). It's easiest if the attacker can observe multiple sequential values, but more complex math could recover the PRNG state to some degree of confidence with non-sequential values.

If an application is vulnerable, this allows an attacker to make arbitrary requests to internal systems.

critical: 0 high: 1 medium: 0 low: 0 linkifyjs 4.2.0 (npm)

pkg:npm/linkifyjs@4.2.0

high 8.8: CVE--2025--8101 Improperly Controlled Modification of Object Prototype Attributes ('Prototype Pollution')

Affected range<4.3.2
Fixed version4.3.2
CVSS Score8.8
CVSS VectorCVSS:4.0/AV:N/AC:L/AT:N/PR:N/UI:N/VC:L/VI:H/VA:L/SC:N/SI:N/SA:N
EPSS Score0.060%
EPSS Percentile19th percentile
Description

Improperly Controlled Modification of Object Prototype Attributes ('Prototype Pollution') vulnerability in Linkify (linkifyjs) allows XSS Targeting HTML Attributes and Manipulating User-Controlled Variables.This issue affects Linkify: from 4.3.1 before 4.3.2.

critical: 0 high: 1 medium: 0 low: 0 async 0.9.2 (npm)

pkg:npm/async@0.9.2

high 7.8: CVE--2021--43138 OWASP Top Ten 2017 Category A9 - Using Components with Known Vulnerabilities

Affected range<2.6.4
Fixed version2.6.4, 3.2.2
CVSS Score7.8
CVSS VectorCVSS:3.1/AV:L/AC:L/PR:N/UI:R/S:U/C:H/I:H/A:H
EPSS Score0.907%
EPSS Percentile75th percentile
Description

A vulnerability exists in Async through 3.2.1 (fixed in 3.2.2), which could let a malicious user obtain privileges via the mapValues() method.

critical: 0 high: 1 medium: 0 low: 0 async 1.5.2 (npm)

pkg:npm/async@1.5.2

high 7.8: CVE--2021--43138 OWASP Top Ten 2017 Category A9 - Using Components with Known Vulnerabilities

Affected range<2.6.4
Fixed version2.6.4, 3.2.2
CVSS Score7.8
CVSS VectorCVSS:3.1/AV:L/AC:L/PR:N/UI:R/S:U/C:H/I:H/A:H
EPSS Score0.907%
EPSS Percentile75th percentile
Description

A vulnerability exists in Async through 3.2.1 (fixed in 3.2.2), which could let a malicious user obtain privileges via the mapValues() method.

critical: 0 high: 1 medium: 0 low: 0 connect-multiparty 2.2.0 (npm)

pkg:npm/connect-multiparty@2.2.0

high 7.8: CVE--2022--29623 Unrestricted Upload of File with Dangerous Type

Affected range<=2.2.0
Fixed versionNot Fixed
CVSS Score7.8
CVSS VectorCVSS:3.1/AV:L/AC:L/PR:N/UI:R/S:U/C:H/I:H/A:H
EPSS Score0.320%
EPSS Percentile54th percentile
Description

An arbitrary file upload vulnerability in the file upload module of Express Connect-Multiparty 2.2.0 allows attackers to execute arbitrary code via a crafted PDF file. NOTE: the Supplier has not verified this vulnerability report.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 336cb19 and e160b38.

📒 Files selected for processing (1)
  • website/modules/asset/ui/src/scss/_testimonials.scss (1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: yuramax
PR: speedandfunction/website#191
File: website/modules/asset/ui/src/scss/_leadership-team.scss:213-216
Timestamp: 2025-07-02T08:15:36.173Z
Learning: In website/modules/asset/ui/src/scss/_leadership-team.scss, the `.leader-bio` element intentionally uses `overflow-y: hidden` at the `breakpoint-extra-large` level to completely remove scrollbars on desktop devices, while maintaining `overflow-y: auto` at the `breakpoint-large` level for tablets. This design decision relies on content managers controlling bio text length to prevent overflow on desktop, ensuring a clean scrollbar-free experience on larger screens.
Learnt from: IhorMasechko
PR: speedandfunction/website#132
File: website/modules/asset/ui/src/scss/_not-found.scss:52-64
Timestamp: 2025-05-29T07:16:52.843Z
Learning: In website/modules/asset/ui/src/scss/_not-found.scss, the .two-buttons container with flex-direction: row and child .sf-button elements having width: 100% does not cause overflow issues and renders correctly, despite theoretical expectations.
📚 Learning: 2025-07-02T08:15:36.173Z
Learnt from: yuramax
PR: speedandfunction/website#191
File: website/modules/asset/ui/src/scss/_leadership-team.scss:213-216
Timestamp: 2025-07-02T08:15:36.173Z
Learning: In website/modules/asset/ui/src/scss/_leadership-team.scss, the `.leader-bio` element intentionally uses `overflow-y: hidden` at the `breakpoint-extra-large` level to completely remove scrollbars on desktop devices, while maintaining `overflow-y: auto` at the `breakpoint-large` level for tablets. This design decision relies on content managers controlling bio text length to prevent overflow on desktop, ensuring a clean scrollbar-free experience on larger screens.

Applied to files:

  • website/modules/asset/ui/src/scss/_testimonials.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: unit-tests
  • GitHub Check: lint
  • GitHub Check: e2e-tests
  • GitHub Check: security-scan

Comment thread website/modules/asset/ui/src/scss/_testimonials.scss Outdated
@VitalyyP VitalyyP changed the title fix: Resolve testimonials being cut off on mobile and medium breakpoints [767] fix: Resolve testimonials being cut Aug 11, 2025

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e160b38 and bf342b7.

📒 Files selected for processing (2)
  • website/modules/asset/ui/src/scss/_carousel.scss (2 hunks)
  • website/modules/asset/ui/src/scss/_testimonials.scss (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • website/modules/asset/ui/src/scss/_testimonials.scss
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: yuramax
PR: speedandfunction/website#191
File: website/modules/asset/ui/src/scss/_leadership-team.scss:213-216
Timestamp: 2025-07-02T08:15:36.173Z
Learning: In website/modules/asset/ui/src/scss/_leadership-team.scss, the `.leader-bio` element intentionally uses `overflow-y: hidden` at the `breakpoint-extra-large` level to completely remove scrollbars on desktop devices, while maintaining `overflow-y: auto` at the `breakpoint-large` level for tablets. This design decision relies on content managers controlling bio text length to prevent overflow on desktop, ensuring a clean scrollbar-free experience on larger screens.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: e2e-tests
  • GitHub Check: unit-tests
  • GitHub Check: lint
  • GitHub Check: security-scan
🔇 Additional comments (2)
website/modules/asset/ui/src/scss/_carousel.scss (2)

47-55: Whitespace-only selector change — OK

Spacing before the brace is a no-op. No behavioral impact.


56-66: Whitespace-only selector change — OK

No functional differences introduced here.

Comment thread website/modules/asset/ui/src/scss/_carousel.scss
This reverts commit bf342b7.
This reverts commit 1d805fc.
@VitalyyP VitalyyP self-assigned this Aug 12, 2025
@VitalyyP
VitalyyP requested a review from Anton-88 August 12, 2025 08:12

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

♻️ Duplicate comments (2)
website/modules/asset/ui/src/scss/_testimonials.scss (2)

69-71: Medium breakpoint still caps content at 150px due to base rule; allow content to use the 240px wrapper.

At medium, .sf-person-wrapper is height: 240px, but .sf-person__content remains constrained by the base max-height: 150px. This leaves unused space and may still feel “cut off”.

If percentages are problematic in your layout, set an explicit max-height at the breakpoint to avoid using height: 100%.

Apply this diff inside the existing breakpoint block:

 @include breakpoint-medium {
-  height: 240px;
+  height: 240px;
+  .sf-person__content {
+    /* Let content utilize the full wrapper height at medium */
+    max-height: 240px; /* explicit to avoid percentage sizing issues */
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
 }

146-151: Single-item (400px) variant: content is still capped at 150px; mirror the wrapper’s 400px height.

In the single-item layout, the wrapper is 400px at medium, but .sf-person__content doesn’t override the base max-height: 150px. Explicitly set the max-height to match the wrapper so longer testimonials can scroll within the 400px space.

Apply this diff:

 @include breakpoint-medium {
   height: 400px;
   .sf-person__content {
+    /* Allow scrolling within the 400px wrapper */
+    max-height: 400px; /* avoids % heights */
+    overflow-y: auto;
+    overflow-x: hidden;
     @include font-settings(22px, 150%, 400);
   }
 }
🧹 Nitpick comments (2)
website/modules/asset/ui/src/scss/_testimonials.scss (2)

82-85: Nit: scope overscroll behavior to Y-axis; revisit both-edges gutter.

  • Prefer overscroll-behavior-y: contain; to avoid unintentionally affecting horizontal gestures/interactions (e.g., Swiper drag) at this node.
  • scrollbar-gutter: stable both-edges; reserves space on both sides; on narrow mobile viewports and overlay-scrollbar OSes it can reduce available text width more than needed. Consider stable (inline-end only).

Apply this diff:

-        overscroll-behavior: contain;
-        scrollbar-gutter: stable both-edges;
+        overscroll-behavior-y: contain;
+        scrollbar-gutter: stable;

75-86: Accessibility follow-up: ensure the scrollable region is keyboard-focusable.

To make the scrollable content accessible to keyboard users/screen readers, ensure the markup provides a focus target (e.g., tabindex="0") and an accessible name (e.g., role="region" with aria-label). SCSS looks good; this requires a template change.

I can draft the minimal markup change and ARIA guidance if helpful.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these settings in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between bf342b7 and 0e7d5a8.

📒 Files selected for processing (1)
  • website/modules/asset/ui/src/scss/_testimonials.scss (1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: yuramax
PR: speedandfunction/website#191
File: website/modules/asset/ui/src/scss/_leadership-team.scss:213-216
Timestamp: 2025-07-02T08:15:36.173Z
Learning: In website/modules/asset/ui/src/scss/_leadership-team.scss, the `.leader-bio` element intentionally uses `overflow-y: hidden` at the `breakpoint-extra-large` level to completely remove scrollbars on desktop devices, while maintaining `overflow-y: auto` at the `breakpoint-large` level for tablets. This design decision relies on content managers controlling bio text length to prevent overflow on desktop, ensuring a clean scrollbar-free experience on larger screens.
📚 Learning: 2025-07-02T08:15:36.173Z
Learnt from: yuramax
PR: speedandfunction/website#191
File: website/modules/asset/ui/src/scss/_leadership-team.scss:213-216
Timestamp: 2025-07-02T08:15:36.173Z
Learning: In website/modules/asset/ui/src/scss/_leadership-team.scss, the `.leader-bio` element intentionally uses `overflow-y: hidden` at the `breakpoint-extra-large` level to completely remove scrollbars on desktop devices, while maintaining `overflow-y: auto` at the `breakpoint-large` level for tablets. This design decision relies on content managers controlling bio text length to prevent overflow on desktop, ensuring a clean scrollbar-free experience on larger screens.

Applied to files:

  • website/modules/asset/ui/src/scss/_testimonials.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: e2e-tests
  • GitHub Check: security-scan
  • GitHub Check: unit-tests
  • GitHub Check: lint
🔇 Additional comments (1)
website/modules/asset/ui/src/scss/_testimonials.scss (1)

75-86: Mobile-first scrollable content looks solid.

Good switch away from truncate-lines. The vertical-only scroll with wrapping, iOS momentum, and stable scrollbar gutter addresses the core issue on small screens.

@VitalyyP
VitalyyP enabled auto-merge (squash) August 14, 2025 11:02

@Anton-88 Anton-88 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@sonarqubecloud

Copy link
Copy Markdown

@VitalyyP
VitalyyP merged commit 730bb8e into main Aug 17, 2025
12 checks passed
@VitalyyP
VitalyyP deleted the 767-fix/long-testimonials-are-cut branch August 17, 2025 11:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants